<template>
	<div class="game-container">
		<div ref="refQuery" class="form-params">
			<el-form
				ref="form"
				:model="ruleForm"
				label-width="80px"
				label-suffix=":"
				:inline="true"
			>
				<el-form-item :label="`${$t('dxn.card_ables_list.table_id')}`">
					<el-input
						v-model.trim="ruleForm.tableCode"
						v-input="{ name: 'symbols' }"
						clearable
						style="width: 230px"
						:placeholder="
							`${$t('dxn.card_ables_list.table_id_placeholder')}`
						"
					></el-input>
				</el-form-item>

				<el-form-item :label="`${$t('dxn.card_ables_list.game_name')}`">
					<el-select
						v-model="ruleForm.tableTypeList"
						clearable
						:placeholder="$t('common.select_all')"
						style="width:220px"
						multiple
					>
						<el-option
							v-for="item in gameType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="模式">
					<el-select
						v-model="ruleForm.squidModelList"
						clearable
						:placeholder="$t('common.select_all')"
						style="width:220px"
						multiple
					>
						<el-option
							v-for="item in squidModels"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="结算方式">
					<el-select
						v-model="ruleForm.settleTypeList"
						clearable
						:placeholder="$t('common.select_all')"
						style="width:220px"
						multiple
					>
						<el-option
							v-for="item in squidSettleTypes"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="鱿鱼时间">
					<el-date-picker
						:clearable="false"
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						value-format="timestamp"
						style="width: 430px"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="table-content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%;"
				:max-height="tableHeight"
				highlight-current-row
				header-align="center"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					label="牌桌ID"
					min-width="195"
					align="center"
					prop="tableCode"
				>
					<template slot-scope="scope">
						<div
							class="text-link"
							@click="
								$router.push({
									path:
										'/dxn/gameManager/cardTablesList/cardTablesBase',
									query: {
										tableId: scope.row.tableCode
									}
								})
							"
						>
							{{ scope.row.tableCode }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					label="牌桌名称"
					min-width="150"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.tableName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="牌桌所属俱乐部ID"
					min-width="125"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.clubId"
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.clubId
									}
								})
							"
						>
							{{ scope.row.clubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="游戏名称"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.tableType, 'gameType') }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="模式"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidModelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="输赢状态"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidStatusName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="结算方式"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.settleTypeName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="鱿鱼轮次"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.round }}
					</template>
				</el-table-column>
				<el-table-column label="盲注" min-width="150" align="center">
					<template slot-scope="scope">
						<ShowBlindInjection
							:tableType="scope.row.tableType"
							:bbBlindScore="scope.row.bbBlindScore"
							:sbBlindScore="scope.row.sbBlindScore"
							:anteSwitch="scope.row.anteSwitch"
							:anteScore="scope.row.anteScore"
							:straddleAmount="scope.row.straddleAmount"
						/>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="鱿鱼模式奖励"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidRewardAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="鱿鱼模式赔付"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidCompensationAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="鱿鱼钱包支付"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidWalletPay
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼开始手牌ID"
					min-width="190"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.beginHandCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼开始手牌号"
					min-width="135"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.beginHandNum }}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼结算手牌ID"
					min-width="190"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.settleHandCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼结算手牌号"
					min-width="135"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.settleHandNum }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.actions')"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div
							v-if="hasPermission('90750103')"
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/squidManager/squidDetail',
									query: {
										tableCode: scope.row.tableCode,
										round: scope.row.round
									}
								})
							"
						>
							鱿鱼详情
						</div>
						<span v-else>-</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { squidModels, squidSettleTypes } from '@/dict/dxn'
import ShowBlindInjection from '@/components/Dxn/ShowBlindInjection'

const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')

export default {
	components: {
		ShowBlindInjection
	},
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			dataList: [],
			loading: false,
			tableHeight: 480,
			ruleForm: {
				tableCode: undefined,
				tableTypeList: [],
				squidModelList: [],
				settleTypeList: []
			},
			searchTime: [start(), end()],
			squidModels,
			squidSettleTypes
		}
	},
	computed: {
		gameType() {
			return this.globalDics.gameType || []
		}
	},
	mounted() {
		this._initMainContent()
	},
	destroyed() {
		window.removeEventListener('resize', this.calculateTableHeight)
	},
	methods: {
		getSearchParam() {
			// squidStatus  用户鱿鱼结算后状态： 0未结算 1:赢 2:输 3:认输 4:放弃
			const searchTime = this.searchTime || []
			const params = {
				userName: this.parentData.userName,
				...this.ruleForm,
				handBeginTimeFrom: searchTime[0]
					? dayjs(searchTime[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				handBeginTimeTo: searchTime[1]
					? dayjs(searchTime[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			if (!params.tableTypeList?.length) {
				params.tableTypeList = undefined
			}
			if (!params.squidModelList?.length) {
				params.squidModelList = undefined
			}
			if (!params.settleTypeList?.length) {
				params.settleTypeList = undefined
			}
			Object.keys(params).forEach((key) => {
				if (params[key] === '') {
					params[key] = undefined
				}
			})
			return params
		},
		loadData() {
			const params = this.getParams(this.getSearchParam())
			if (!params.userName) {
				return
			}
			this.loading = true
			this.dataList = []
			this.$api
				.getMemberSquidInfoBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record || []
						this.total = res?.data?.totalRecord
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.pageNum = 1
			this.searchTime = [start(), end()]
			Object.keys(this.ruleForm).forEach((key) => {
				if (Array.isArray(this.ruleForm[key])) {
					this.ruleForm[key] = []
				} else {
					this.ruleForm[key] = undefined
				}
			})
			this.loadData()
		},
		// 初始化table区域高度
		_initMainContent() {
			this.$nextTick(() => {
				this.calculateTableHeight()
				window.addEventListener('resize', this.calculateTableHeight)
			})
		},
		// 计算table区域显示内容高度
		calculateTableHeight() {
			const CLIENT_HEIGHT = document.body.clientHeight
			const formArr = document.getElementsByClassName('el-form')
			let formHeight = 340
			for (let i = 0; i < formArr.length; i++) {
				formHeight += formArr[i]?.offsetHeight || 0
			}
			this.tableHeight = CLIENT_HEIGHT - formHeight
		}
	}
}
</script>
<style lang="scss" scoped>
.game-container {
	margin-top: 0px;
}
.form-params {
	padding: 15px 20px 10px 20px;
	margin-top: 0px;
	border-radius: 3px;
	box-shadow: 0 2px 7px #ccc;
}
.table-content {
	margin-top: 15px;
	padding: 10px;
	border-radius: 1px;
	box-shadow: 0 2px 7px #ccc;
	.el-pagination {
		text-align: right;
		margin-top: 15px;
	}
}
</style>
